import { useParams, Link } from '@tanstack/react-router';
import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/card';
import { Badge } from '../components/ui/badge';
import { Button } from '../components/ui/button';
import Layout from '../components/Layout';
import { useUserQuery, useUserPostsQuery } from '../hooks/useQueries';

export default function UserDetailPage() {
  const { userId } = useParams({ strict: false });
  const userIdNum = userId ? parseInt(userId) : 0;
  
  const { data: user, isLoading: userLoading, error: userError } = useUserQuery(userIdNum);
  const { data: posts, isLoading: postsLoading } = useUserPostsQuery(userIdNum);

  if (userLoading) {
    return (
      <Layout>
        <div className="space-y-4">
          <div className="flex items-center gap-4">
            <Button asChild variant="outline">
              <Link to="/users">← Back to Users</Link>
            </Button>
            <div className="h-8 bg-muted rounded w-48 animate-pulse"></div>
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <Card className="animate-pulse">
              <CardHeader>
                <div className="h-6 bg-muted rounded w-1/2"></div>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {Array.from({ length: 6 }).map((_, i) => (
                    <div key={i} className="space-y-2">
                      <div className="h-4 bg-muted rounded w-1/4"></div>
                      <div className="h-4 bg-muted rounded w-3/4"></div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </Layout>
    );
  }

  if (userError) {
    return (
      <Layout>
        <div className="space-y-4">
          <Button asChild variant="outline">
            <Link to="/users">← Back to Users</Link>
          </Button>
          <Card className="border-destructive">
            <CardContent className="pt-6">
              <p className="text-destructive">
                Error loading user: {userError.message}
              </p>
            </CardContent>
          </Card>
        </div>
      </Layout>
    );
  }

  if (!user) {
    return (
      <Layout>
        <div className="space-y-4">
          <Button asChild variant="outline">
            <Link to="/users">← Back to Users</Link>
          </Button>
          <Card>
            <CardContent className="pt-6">
              <p>User not found</p>
            </CardContent>
          </Card>
        </div>
      </Layout>
    );
  }

  return (
    <Layout>
      <div className="space-y-6">
        <div className="flex items-center gap-4">
          <Button asChild variant="outline">
            <Link to="/users">← Back to Users</Link>
          </Button>
          <h1 className="text-3xl font-bold">{user.name}</h1>
          <Badge variant="outline">User #{user.id}</Badge>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* User Details */}
          <Card>
            <CardHeader>
              <CardTitle>Personal Information</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <p className="text-sm font-medium">Username</p>
                  <p className="text-sm text-muted-foreground">@{user.username}</p>
                </div>
                <div>
                  <p className="text-sm font-medium">Email</p>
                  <p className="text-sm text-muted-foreground">{user.email}</p>
                </div>
                <div>
                  <p className="text-sm font-medium">Phone</p>
                  <p className="text-sm text-muted-foreground">{user.phone}</p>
                </div>
                <div>
                  <p className="text-sm font-medium">Website</p>
                  <p className="text-sm text-muted-foreground">{user.website}</p>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Address */}
          <Card>
            <CardHeader>
              <CardTitle>Address</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <p className="text-sm font-medium">Street</p>
                  <p className="text-sm text-muted-foreground">
                    {user.address.street}, {user.address.suite}
                  </p>
                </div>
                <div>
                  <p className="text-sm font-medium">City</p>
                  <p className="text-sm text-muted-foreground">{user.address.city}</p>
                </div>
                <div>
                  <p className="text-sm font-medium">Zipcode</p>
                  <p className="text-sm text-muted-foreground">{user.address.zipcode}</p>
                </div>
                <div>
                  <p className="text-sm font-medium">Coordinates</p>
                  <p className="text-sm text-muted-foreground">
                    {user.address.geo.lat}, {user.address.geo.lng}
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Company */}
          <Card>
            <CardHeader>
              <CardTitle>Company</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <p className="text-sm font-medium">Name</p>
                  <p className="text-sm text-muted-foreground">{user.company.name}</p>
                </div>
                <div>
                  <p className="text-sm font-medium">Catch Phrase</p>
                  <p className="text-sm text-muted-foreground">"{user.company.catchPhrase}"</p>
                </div>
                <div>
                  <p className="text-sm font-medium">Business</p>
                  <p className="text-sm text-muted-foreground">{user.company.bs}</p>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* User Posts */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                User Posts
                <Badge variant="outline">
                  {posts?.length || 0} posts
                </Badge>
              </CardTitle>
            </CardHeader>
            <CardContent>
              {postsLoading ? (
                <div className="space-y-2">
                  {Array.from({ length: 3 }).map((_, i) => (
                    <div key={i} className="h-4 bg-muted rounded animate-pulse"></div>
                  ))}
                </div>
              ) : posts && posts.length > 0 ? (
                <div className="space-y-3">
                  {posts.slice(0, 5).map((post) => (
                    <div key={post.id} className="border-l-2 border-primary pl-3">
                      <p className="text-sm font-medium line-clamp-1">{post.title}</p>
                      <p className="text-xs text-muted-foreground line-clamp-2">
                        {post.body}
                      </p>
                    </div>
                  ))}
                  {posts.length > 5 && (
                    <p className="text-xs text-muted-foreground">
                      +{posts.length - 5} more posts
                    </p>
                  )}
                </div>
              ) : (
                <p className="text-sm text-muted-foreground">No posts found</p>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </Layout>
  );
} 